<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔鲜</title>
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/payment.css">
  <link rel="shortcut icon" href="../public/favicon.ico">
  <style>
    @font-face {
      font-family: 'toutiao';
      src:
        url('../public/font/iconfont.woff2') format('woff2'),
        url('../public/font/iconfont.woff') format('woff'),
        url('../public/font/iconfont.ttf') format('truetype');
    }

    .toutiao {
      font-family: 'toutiao' !important;
      font-size: 22px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  </style>
</head>

<body>
  <!-- 头部开始 -->
  <header>
    <!-- 顶部导航 -->
    <div class="topnav">
      <!-- 版心盒子 -->
      <div class="topnav_content">
        <!-- 放置顶部导航的盒子 -->
        <div class="topnav_right">
          <ul>
            <li>
              <a href="javascript:;">请先登录</a>
            </li>
            <li>
              <a href="javascript:;">免费注册</a>
            </li>
            <li>
              <a href="javascript:;">我的订单</a>
            </li>
            <li>
              <a href="javascript:;">会员中心</a>
            </li>
            <li>
              <a href="javascript:;">帮助中心</a>
            </li>
            <li>
              <a href="javascript:;">关于我们</a>
            </li>
            <li>
              <a href="javascript:;">
                <span class="toutiao">&#xe60a; </span>手机版</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 顶部导航结束 -->
      <!-- 导航栏 -->
    </div>

    <!-- 顶部导航结束 -->
    <!-- 导航栏 -->
    <div class="block-nav">
      <div class="nav w">
        <!-- 版心盒子 -->
        <div class="nav-content w">
          <!-- 放置logo的盒子 -->
          <div class="nav-left">
            <h1>
              <a href="">logo</a>
            </h1>
          </div>
          <!-- 中间导航部分 -->
          <div class="nav-center">
            <ul>
              <li>
                <a href="javascript:;">首页</a>
              </li>
              <li>
                <a href="javascript:;">居家</a>
              </li>
              <li>
                <a href="javascript:;">美食</a>
              </li>
              <li>
                <a href="javascript:;">服饰</a>
              </li>
              <li>
                <a href="javascript:;">母婴</a>
              </li>
              <li>
                <a href="javascript:;">个护</a>
              </li>
              <li>
                <a href="javascript:;">严选</a>
              </li>
              <li>
                <a href="javascript:;">数码</a>
              </li>
              <li>
                <a href="javascript:;">运动</a>
              </li>
              <li>
                <a href="javascript:;">杂项</a>
              </li>
            </ul>
          </div>
          <!-- 右边导航部分 -->
          <div class="nav-right">
            <span class="toutiao">&#xe63b; </span>
            <input type="text" placeholder="搜一搜" />
            <div id="none-shop">
              <span class="toutiao" id="gouwuche">&#xe649; </span>
              <i id="count">0</i>
              <!-- 隐藏购物车盒子 -->
              <div class="none-shop active">
                <div class="tri">
                  <div class="trangle"></div>
                  <div class="trangle1"></div>
                </div>
                <div class="top">
                  <ul>
                    <!--  <li>
                        <div class="pho">
                          <img src="./public/produceImgs/D1.jpg" alt="" />
                        </div>
                        <div class="text">
                          <span id="title">麦瑞克家用轻音智能多功能彩屏跑步机S450</span
                          >
                          <span id="dec">规格：多功能 款式：蓝屏</span>
                        </div>
                        <div id="count-right">
                          <span id="price">￥2303.00</span>
                          <span>x1</span>
                        </div>
                        <div id="close">
                          <span class="toutiao" id="toutiao-close">&#xe604;</span>
                        </div>
                      </li> -->
                  </ul>
                </div>
                <div id="bottom">
                  <div class="total">
                    <span class="title">共1件商品</span>
                    <span class="price">￥2303.00</span>
                  </div>
                  <div class="input">
                    <button id="input">去购物车结算</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏导航栏 -->
    <div class="none-nav active">
      <div class="nav w">
        <!-- 版心盒子 -->
        <div class="nav-content w">
          <!-- 放置logo的盒子 -->
          <div class="nav-left">
            <h1>
              <a href="">logo</a>
            </h1>
          </div>
          <!-- 中间导航部分 -->
          <div class="nav-center">
            <ul>
              <li>
                <a href="javascript:;">首页</a>
              </li>
              <li>
                <a href="javascript:;">居家</a>
              </li>
              <li>
                <a href="javascript:;">美食</a>
              </li>
              <li>
                <a href="javascript:;">服饰</a>
              </li>
              <li>
                <a href="javascript:;">母婴</a>
              </li>
              <li>
                <a href="javascript:;">个护</a>
              </li>
              <li>
                <a href="javascript:;">严选</a>
              </li>
              <li>
                <a href="javascript:;">数码</a>
              </li>
              <li>
                <a href="javascript:;">运动</a>
              </li>
              <li>
                <a href="javascript:;">杂项</a>
              </li>
            </ul>
          </div>
          <!-- 右边导航部分 -->
          <div class="none-right">
            <!-- <span class="toutiao">&#xe63b; </span>
              <input type="text" placeholder="搜一搜" />
              <span class="toutiao" id="gouwuche">&#xe649; </span>
              <i id="count"></i> -->
            <ul>
              <li>
                <a href="javascript:;" id="brand" class="brand">品牌</a>
              </li>
              <li>
                <a href="javascript:;" id="theme" class="theme">专题</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏导航栏结束 -->

    <!-- 导航栏结束 -->
  </header>
  <!-- 头部结束 -->

  <!-- 内容开始 -->
  <div class="main">
    <div class="card w">
      <div class="top">
        <a href="#">首页</a>
        <i class="toutiao">&#xe65f;</i>
        <a href="#">购物车</a>
        <i class="toutiao">&#xe65f;</i>
        <span>支付订单</span>
      </div>
      <div class="payInfo">
        <span class="toutiao">&#xe605;</span>
        <div class="countDown">
          <p>订单提交成功！请尽快完成支付。</p>
          <p>
            支付还剩
            <span class="time">60分00秒</span>
            , 超时后将取消订单
          </p>
        </div>
        <div class="practical">
          <span>应付总额：</span>
          <span class="prices">¥0</span>
        </div>
      </div>
      <!-- 支付方式 -->
      <div class="payType">
        <h3>选择以下支付方式付款</h3>
        <p class="platform">支付平台</p>
        <div class="wx">
          <a href="#"></a>
          <a
            href="https://excashier.alipaydev.com/standard/auth.htm?payOrderId=b6906083c2df42d6a37d4d792f9b6002.00"></a>
        </div>
        <p>支付方式</p>
        <div class="bank">
          <a href="#">招商银行</a>
          <a href="#">工商银行</a>
          <a href="#">建设银行</a>
          <a href="#">农业银行</a>
          <a href="#">农业银行</a>
        </div>
      </div>
    </div>
  </div>





  <!-- 尾部开始 -->
  <div class="footer">
    <div class="footerContent">
      <ul class="footerBox">
        <li>
          <p>客户服务</p>
          <div class="tubiao">
            <div class="iconBox">
              <i class="iconfont">&#xe661;</i>
              <p>在线客服</p>
            </div>
            <div class="iconBox">
              <i class="iconfont">&#xe600;</i>
              <p>问题反馈</p>
            </div>
          </div>
        </li>

        <li>
          <p>关注我们</p>
          <div class="tubiao">
            <div class="iconBox">
              <i class="iconfont">&#xe65c;</i>
              <p>公众号</p>
            </div>
            <div class="iconBox">
              <i class="iconfont">&#xe65d;</i>
              <p>微博</p>
            </div>
          </div>
        </li>

        <li class="download">
          <p>下载APP</p>
          <div class="title">
            <div>
              <img src="	http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt="" />
            </div>
            <div>
              <span>扫描二维码</span>
              <span>立马下载APP</span>
              <a href="#">下载页面</a>
            </div>
          </div>
        </li>

        <li class="fuwu">
          <p>服务热线</p>
          <div>
            <span> 400-0000-000 </span>
            <span>周一至周日 8:00-18:00</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 尾部结束 -->
  <!-- 底部开始 -->
  <div class="bottom">
    <div class="content">
      <div class="character">
        <a href="javascript:;">
          <i class="iconfont">&#xe6e5;</i>
          <span>价格亲民</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont">&#xe60e;</i>
          <span>物流快捷</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont">&#xe665;</i>
          <span>品质新鲜</span>
        </a>
      </div>
      <div class="copyright">
        <p>
          <a href="javascript:;">关于我们</a>
          <a href="javascript:;">帮助中心</a>
          <a href="javascript:;">售后服务</a>
          <a href="javascript:;">配送与验收</a>
          <a href="javascript:;">商务合作</a>
          <a href="javascript:;">搜索推荐</a>
          <a href="javascript:;">友情链接</a>
        </p>
        <p>CopyRight © 小兔鲜儿</p>
      </div>
    </div>
  </div>
  <!-- 底部结束 -->

  <script src="../js/payment.js"></script>

  <script src="../js/common.js"></script>

  <script src="../js/topRegisters.js"></script>

  <script src="../js/goto.js"></script>
</body>

</html>